<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>2</title>
		<style type="text/css">
			#div1{
				width: 100;
				height: 100;
				border: #FF0000;
			}
		</style>
	</head>
	<body>
<!-- 		2.新制作一个页面，要求：
		       2.1 至少包含以下元素：3个DIV,标题，5个P标签，图片，列表 
		       2.2 分别实现 id,类，标签三种方式查找以上元素 -->
		<!-- 3个DIV -->
		<div id="div1">第一个DIV</div>
		<div id="div2" class="div22">第二个DIV</div>
		<div id="div3" class="div33">第三个DIV</div>
		
		<!-- //5个P标签 -->
		<p>第一个P标签</p>
		<p>第二个P标签</p>
		<p>第三个P标签</p>
		<p>第四个P标签</p>
		<p>第五个P标签</p>
		
		<!-- // 标题 h1 -->
		<h1>H1标题</h1>

		<!-- 图片标签img -->
		<img src="./js/j.jpg" >
		
		<!-- // 列表 ul>li-->
		<ul>
			<li name="LB">列表1</li>
			<li name="LB">列表2</li>
			<li name="LB">列表3</li>
			<li name="LB">列表4</li>
			<li name="LB">列表5</li>
		</ul>
		
	</body>
	<script type="text/javascript">
		//id选择器
		var id1Obj = document.getElementById('div1');
		console.log(id1Obj);
		
		//类选择器
		var id2Obj = document.getElementsByClassName('div22')
		console.log(id2Obj[0]);
		
		var id3Obj = document.getElementsByClassName('div33')
		console.log(id3Obj);
		
		//标签选择器(对div)
		var obj4 = document.getElementsByTagName('div')
		console.log(obj4);
		
		var obj5 = document.getElementsByTagName('p')
		console.log(obj5);
		
		var obj6 = document.getElementsByTagName('h1')
		console.log(obj6);
		
		//name
		var obj7 = document.getElementsByName('LB')
		console.log(obj7);
	</script>
</html>
